
<template>
  <el-dialog top="1vh" v-model="ifShow" title="行驶轨迹" width="1400" :before-close="handleCancel">
    <div id="maps" style="width: 100%; height: 800px"></div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleCancel">取消</el-button>
        <el-button type="primary" @click="handleOk">确认</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import AMapLoader from "@amap/amap-jsapi-loader";
import CommonApi from "@/api/common";
import OrderApi from "@/api/order";
import { nextTick, ref } from "vue";
const ifShow = ref(false);
let orderId = ref(null);
let mapInstance: any = ref(null); // 存储地图实例
let polyline: any = ref(null); // 存储路线实例
let startMarker: any = ref(null); // 存储起点标记实例
let endMarker: any = ref(null); // 存储终点标记实例

function initMap() {
  AMapLoader.load({
    key: "3e4c1f76807c5beae8aef6c4a6af69dd", // 申请好的Web端开发者Key，首次调用 load 时必填
    version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: ["AMap.Scale", "AMap.Polygon", "AMap.PolygonEditor"], //需要使用的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
  })
    .then((AMap) => {
      setLocation();
    })
    .catch((e) => {
      console.log(e);
    });
}

function setLocation() {
  OrderApi.getLocation({ orderId: orderId.value }).then((res: any) => {
    console.log("请求成功了啊", res);
    if (res.code == 0) {
      console.log("成功", res);

      let data = res.result;
      let path = data.length ? data.map((item: any) => [item.longitude, item.latitude]) : [];

      // 检查路径是否有至少两个点
      if (path.length >= 2) {
        // 如果已经有地图实例，清除它
        if (mapInstance.value) {
          mapInstance.value.destroy(); // 销毁旧的地图实例
          mapInstance.value = null; // 确保 mapInstance 被重置
        }

        mapInstance.value = new AMap.Map("maps", {
          zoom: 12,
          // 以路径的第一个点作为地图中心
          center: path[0],
        });

        polyline.value = new AMap.Polyline({
          path: path,
          strokeColor: "#0000FF", // 蓝色线条
          strokeOpacity: 1,
          strokeWeight: 6,
        }).setMap(mapInstance.value);

        startMarker.value = new AMap.Marker({
          position: path[0], // 起点坐标
          content: '<div id="marker-start" style="width:50px;height:50px;background:#fff;border-radius: 50%;line-height: 50px; text-align: center;">起点</div>', // 自定义点标记覆盖物内容
          map: mapInstance.value,
        });

        endMarker.value = new AMap.Marker({
          position: path[path.length - 1], // 终点坐标
          content: '<div id="marker-end" style="width:50px;height:50px;background:#fff;border-radius: 50%;line-height: 50px; text-align: center;">终点</div>', // 自定义点标记覆盖物内容
          map: mapInstance.value,
        });
      } else {
        console.error("Not enough points to draw a path.");

        let map = new AMap.Map("maps", {
          viewMode: "3D",
          zoom: 11,
          center: [116.397428, 39.90923],
        });
      }
    }
  });
}

function edit(row: any) {
  nextTick(() => {
    ifShow.value = true;
    orderId.value = row.id;
    initMap();
  });
}

/**
 * 确定按钮点击事件
 */
async function handleOk() {}

/**
 * 取消按钮回调事件
 */
function handleCancel() {
  ifShow.value = false;
}

defineExpose({
  edit,
});
onMounted(() => {});
</script>
<style lang="scss" scoped>
#maps {
  width: 100%;
  height: 400px;
}
</style>
